<template>
  <view>
    <u-swiper :list="list1" />
    <u-sticky offset-top="0">
      <div class="h-100px w-full flex items-center bg-#fff">
        <u-search v-model="keyword" placeholder="日照香炉生紫烟" />
      </div>
    </u-sticky>
    <view v-for="k in 10" :key="k">
      <u-no-network
        @disconnected="disconnected"
        @connected="connected"
        @retry="retry"
      />
      <view class="u-content">
        <view class="u-content__circle">
          <u-icon
            name="checkbox-mark"
            color="#fff"
            size="30"
          />
        </view>
        <text class="u-content__normal">网络正常</text>
      </view>
    </view>
  </view>
<!--  <tabbar page-path="pages/home/index" /> -->
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      indexList: [],
      urls: [
        'https://cdn.uviewui.com/uview/album/1.jpg',
        'https://cdn.uviewui.com/uview/album/2.jpg',
        'https://cdn.uviewui.com/uview/album/3.jpg',
        'https://cdn.uviewui.com/uview/album/4.jpg',
        'https://cdn.uviewui.com/uview/album/5.jpg',
        'https://cdn.uviewui.com/uview/album/6.jpg',
        'https://cdn.uviewui.com/uview/album/7.jpg',
        'https://cdn.uviewui.com/uview/album/8.jpg',
        'https://cdn.uviewui.com/uview/album/9.jpg',
        'https://cdn.uviewui.com/uview/album/10.jpg',
      ],
      list1: [
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      ],
    }
  },
  onLoad() {
    this.loadmore()
  },
  methods: {
    disconnected() {
      console.log('disconnected')
    },
    connected() {
      console.log('connected')
    },
    retry() {
      console.log('retry')
    },
    scrolltolower() {
      this.loadmore()
    },
    loadmore() {
      for (let i = 0; i < 30; i++) {
        this.indexList.push({
          url: this.urls[uni.$u.random(0, this.urls.length - 1)],
        })
      }
    },
  },
}
</script>

<style scoped lang='scss'>
.u-content {
  padding: 150px 60px 0;
  @include flex(column);
  align-items: center;
  justify-content: center;

  &__circle {
    background-color: $u-success;
    @include flex;
    border-radius: 100px;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
  }

  &__normal {
    font-size: 15px;
    color: $u-success;
    margin-top: 15px;
  }
}
</style>
